{% extends 'base.html' %}
{% block title %}查看任务{% endblock %}
{% block css %}

    <!-- Theme style -->

    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->

    <link rel="stylesheet" href="static/plugins/datatables/dataTables.bootstrap.css">
    <style type="text/css">
        .detail {
            table-layout: fixed;
            width: 100%;
            white-space: nowrap;
        }

        .detail td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    </style>
    {#    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">#}
{% endblock %}

{% block content %}

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            分析详情
        </h1>
        <ol class="breadcrumb">
            <li><a href="/"><i class="fa fa-dashboard"></i> 主页</a></li>

            <li class="active">分析详情</li>
        </ol>
    </section>

    <!-- Main content -->


    <section class="content">

        <!-- Default box -->
        <div class="row">
            <div class="col-md-12">


                <div class="box">

                    <!-- /.box-header -->


                    <div class="box-body">
                        <table class="table  table-hover detail"
                               style="border-left:3px solid deepskyblue;border-bottom:1px solid deepskyblue"
                               id="analysis_table">

                            <thead>
                            <tr>
                                <th width="20%">项目名称</th>
                                <th width="10%">影响组件数量</th>
                                <th width="5%">严重</th>
                                <th width="5%">高</th>
                                <th width="5%">中</th>
                                <th width="5%">低</th>
                                <th width="15%">分析时间</th>
                                <th width="10%">image Id</th>
                                <th width="10%">分析状态</th>
                                <th width="15%">负责人</th>
                            </tr>
                            </thead>
                            <tbody>


                            {% for item in resp %}
                                <tr>
                                    <td>
                                        <b>

<span data-toggle="tooltip" data-placement="left"
                                              title="{{ item['project_name'] }}"><a href="/images_details?image_id={{ item['imageId'] }}"
                                              target="_Blank">{{ item['project_name'] }}</a></span>


                                        </b>
                                    </td>
                                    <td>{{ item['affected_package_count'] }}</td>
                                    <td>{{ item['critical'] }}</td>
                                    <td>{{ item['high'] }}</td>
                                    <td>{{ item['medium'] }}</td>
                                    <td>{{ item['low'] }}</td>
                                    <td>{{ item['analyzed_at'] }}</td>

                                    <td>
{{ item['imageId'] }}

                                    </td>
                                    <td>{{ item['analysis_status'] }}</td>
                                    <td>

<span data-toggle="tooltip" data-placement="left"
                                              title="{{ item['publisher'] }}">{{ item['publisher'] }}</span>

                                    </td>

                                </tr>
                            {% endfor %}


                            </tbody>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>


                <!-- /.box -->


            </div>
            <!-- /.col -->

            <!-- /.col -->
        </div>
        <!-- /.box-body -->

    </section>





    <!-- /.content -->

{% endblock %}




{% block script %}


    <!-- FastClick -->
    <script src="static/plugins/fastclick/fastclick.js"></script>
    <!-- AdminLTE App -->
    <script src="static/dist/js/app.min.js"></script>
    <!-- DataTables -->
    {#    <script src="static/plugins/datatables/jquery.dataTables.min.js"></script>#}
    <script src="static/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="static/plugins/datatables/dataTables.bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#analysis_table').DataTable({
                "searching": false,
                'order': [1, 'desc']
            });
        });


    </script>

{% endblock %}